<template>
  <div class="home">
    <h1>{{ $store.state.msg }}</h1>
    <button @click="add">num++</button>
    <h3>{{ $store.state.num }}</h3>

    <h1>所有的崔猛加起来是{{ sum }}</h1>
    <h1>所有的崔猛加起来是{{ this.$store.getters.all }}</h1>
    <input type="text" v-model="name" />
    <input type="text" v-model="hobbit" />
    <button @click="adds">add</button>
    <ul>
      <li v-for="(item, index) in $store.state.list" :key="index">
        <input type="text" v-model="item.name" v-if="flag == index" />
        <span @dblclick="flag = index" v-else> {{ item.name }}</span>
        <span>==={{ item.e }}</span>

        <button @click="remove(index)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "",
      hobbit: "",
      flag: -1,
    };
  },
  methods: {
    add() {
      //在这里点击num++执行add方法 ，但是在这个方法 没有权力直接操作state，而是要调用一个mutation来操作state
      //调用mutation的
      this.$store.commit("aa");
    },
    adds() {
      this.$store.commit("adds", { name: this.name, e: this.hobbit });
      //commit 只接受两个参数 第一个永远都是 调用的mutation的名字
    },
    remove(index) {
      this.$store.commit("remove", index);
    },
  },
  computed: {
    sum() {
      let num = 0;
      this.$store.state.list.forEach((item) => {
        num += item.age;
      });
      return num;
    },
  },
};
</script>
